<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function add() {
            let ele = document.createElement("li");
            ele.innerHTML="新添加的节点";
            ele.style.backgroundColor="red";
            ele.style.color="black";

            let ul = document.querySelector("#list");
            //ul.appendChild(ele);

            let il = document.querySelector("#cl");
            ul.insertBefore(ele,il);
        }
    </script>
    <style type="text/css">
        #list{
            color: blue;
        }
    </style>
</head>
<body>
<div>
    <ul id="list">
        <li>A</li>
        <li>B</li>
        <li id="cl">C</li>
        <li>D</li>
    </ul>
</div>
<button onclick="add()">点击添加</button>
</body>
</html>